<template>
  <div>
    <div>
        <el-row >
        <el-col :span="2">
            <!-- <img style="width: 8.5rem;height: 1.88rem;margin: 1rem 0 1rem 2rem;" src="../assets/img/logo/logo.jpg"/> -->
            <img style="width: 9rem;height: 2.5rem;margin: 0.8rem 0 1rem 2rem;" src="../assets/img/logo/2.svg"/>
        </el-col>
        <el-col :span="1">
            <!-- <div class="the-title">459N.COM</div> -->
        </el-col>
        <el-col :span="1" :offset="16">
                <!-- <div style="width: 2rem;height: 2rem;margin: 1rem 0 1rem 1rem;border-radius: 50%;border: 0.06rem  solid rgba(242, 243, 245, 1);">
                    <div style="margin: 0.5rem;">
                        <el-icon><Search /></el-icon>
                    </div>
                </div> -->
        </el-col>
        <el-col :span="1">
            <!-- <div style="width: 2rem;height: 2rem;margin: 1rem 0 1rem 1rem;border-radius: 50%;border: 0.06rem  solid rgba(242, 243, 245, 1);">
                <div style="margin: 0.5rem;">
                    <el-icon><ElemeFilled /></el-icon>
                </div>
            </div> -->
        </el-col>
        <el-col :span="1">
            <!-- <div style="width: 2rem;height: 2rem;margin: 1rem 0 1rem 1rem;border-radius: 50%;border: 0.06rem  solid rgba(242, 243, 245, 1);">
                <div style="margin: 0.5rem;">
                    <el-icon><BellFilled /></el-icon>
                </div>
            </div> -->
        </el-col>

        <el-col :span="2">
            <!-- <img style="width: 2rem;height: 2rem;margin: 1rem 0 1rem 1rem;" src="../assets/img/icon/A.png"/> -->

          <el-dropdown trigger="click" size="large" @command="handleCommand" v-if="isLogin">
            <div style="background-color: #4080FF;color: #fff;font-weight: 600;width: 2.5rem;height: 2.5rem;cursor: pointer;
             border-radius: 50%;text-align: center;line-height: 2.5rem;margin: 0.6rem 0 1rem -1rem;font-size: 1.5rem">
              <div style="width: 2.5rem;height: 2rem;line-height: 2rem;text-align: center;margin-top: 0.25rem">{{ letter }}</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">{{ mineInfo?.name }}</el-dropdown-item>
                <el-dropdown-item divided command="b">{{ $t('导航栏.头像.账户设置')}}</el-dropdown-item>
                <el-dropdown-item command="c">{{ $t('导航栏.头像.退出')}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <div v-show="!isLogin" style="display: flex;width: 15rem;margin-top: 1rem;margin-left: -8rem">
            <div class="nav-text" style="min-width: 4.125rem;text-align: center" @click="ShiftLogin">{{ $t('登录') }}</div>
            <div class="nav-btn">
              <div class="btn-sign-up" style="min-width: 4.125rem;text-align: center" @click="ShiftRegister">{{ $t('按钮.注册') }}</div>
            </div>
          </div>
        </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import { getUser } from "../apis/user";
export default {
  data(){
    return {
      mineInfo:{
        // avatar:require('../assets/img/image/avatar2.png'),
        "name": "",
        "invite_code": "",
        "email": "",
        "subscription": "",
        "expired_at": "",
        "is_active": false,
        "register_date":''
      },
      letter:'',
      isLogin:false
    }
  },
  mounted(){
    // this.mineInfo = JSON.parse(localStorage.getItem('myinfo'))
    // 取token 判断是否是登录状态
    const token = localStorage.getItem('token')
    this.isLogin = !!token;
    this.getUserInfo()
  },
  methods:{
    // 获取用户信息
    getUserInfo() {
      getUser().then((res) => {
        if (res.code == 200 && res.status == 1) {
          this.mineInfo = res.data;
          if(this.mineInfo && this.mineInfo.name && this.mineInfo.name.length > 0){
            const name  =this.mineInfo.name.toString()
            this.letter = name.slice(0,1);
            if(this.letter.toLocaleUpperCase()){
              this.letter = this.letter.toLocaleUpperCase()
            }else{
              this.letter = 'L'
            }
          }else{
            this.letter = 'L'
          }
          // localStorage.setItem("myinfo", JSON.stringify(this.mineInfo));
        }
      });
    },
    handleCommand(command){
      if(command === "b"){          //跳转到设置页面
        this.$router.push("/setting/mine");
      }else if(command === "c"){   //退出登录
        localStorage.clear();
        ElMessage({
          message: this.$t("工作台.个人信息.退出成功"),
          grouping: true,
          type: "success",
        });
        this.$router.push({path:'/login'})
        this.getUserInfo();
      }
    },
    ShiftLogin(){
      this.$router.push("/login");
    },
    ShiftRegister(){
      this.$router.push("/register");
    }
  }
}
</script>

<style lang="scss" scoped>
.the-title{   
  margin: 1rem 0 1rem 1rem;
  width: 8.75rem;
  height: 1.88rem;
  color: rgba(16, 16, 16, 1);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: left;
  font-family: AlibabaPuHui-medium;
}
.nav-text{
  cursor: pointer;
  height: 1.125rem;
  margin: 0.1rem 0 0 1.56rem;
  font-weight: 600;
  font-size: 1.2rem;
  color: #054ADA;
}
/* 鼠标悬浮时的样式 */
.nav-text:hover{
  cursor: pointer;
  height: 1.125rem;
  margin: 0.1rem 0 0 1.56rem;
  font-weight: 600;
  font-size: 1.2rem;
  opacity: 1;
  color: #FE8700;
}
.nav-btn{
  box-sizing: border-box;
  cursor: pointer;
  min-width: 7.5rem;
  height: 2.5rem;
  margin: 0 1.43rem 0 1.94rem;
  color: #054ADA;
  .btn-sign-up{
    min-width: 5.43rem;
    height: 1.5rem;
    font-weight: bold;
    font-size: 1.3rem;
    opacity: 1 !important;
  }
}
/* 鼠标悬浮时的样式 */
.nav-btn:hover{
  cursor: pointer;
  min-width: 7.5rem;
  height: 2.5rem;
  margin: 0 1.43rem 0 1.94rem;
  color: #FE8700;
}
</style>